<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyword">
						<el-input v-model="queryParams.keyword" placeholder="请输入关键词" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search"/>
					</el-form-item>
				</div>
				<el-form-item>
					<div class="flex col-center row-end" style="margin-right: 0">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">商品配方列表</span>
				<div>
					<el-button type="defaultBtn" @click="handleAdd('')" v-hasPermi="['product_recipe:add']">
						新建配方
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				<el-table-column label="商品名称" align="center" prop="productName">
					<template #default="scope">
						<span class="main-color">{{scope.row.productName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="农药登记证号" align="center" prop="pesticideRegistrationNumber"/>
				<el-table-column label="库存成本（元/吨）" align="center" prop="inventoryCost"/>
				<el-table-column label="实时成本（元/吨）" align="center" prop="realTimeCost"/>
				<el-table-column label="更新时间" align="center" prop="updateTime"/>
				<el-table-column label="更新人" align="center" prop="updateName" />
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
						v-hasPermi="['product_recipe:edit']"
							>编辑配方</el-button>
						<el-button size="mini" type="text" @click="handleVersion(scope.row)"
						v-hasPermi="['product_recipe_history:check']"
							>查看历史版本</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
								v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<operateCost ref="costPop" @refreshList="getList"></operateCost>
	</div>
</template>

<script setup name="ProductSetup">
	import {
		costList, //列表
	} from "@/api/business/cost";
	import {
		Search
	} from '@element-plus/icons-vue'
	import {
		getDivisions
	} from "@/api/business/opportunity";//地址
</script>
<script>
	import operateCost from "./components/operateCost.vue";
	export default {
		components:{
			operateCost
		},
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '', // 
				}, //查询参数
			}
		},
		created() {
			this.getList()
		},
		methods: {	
			// 查询地址
			getAddress(){
				let query = {
						type: 'provinces',
						pageNum: 1,
						pageSize: 5000
					}
					//查询接口
				getDivisions(query, query.type).then(res => {
					if(res.code == 200){
						this.address = res.rows
						this.getList()
					}
				})
			},
			//查询作物列表
			getList() {
				this.loading = true;
				costList(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 启用状态操作
			updateEnabled(row) {
				this.loading = true;
				let item = {
					id: row.id,
					status: row.status,
				}
				updateProduct(item).then((response) => {
					this.$modal.msgSuccess("启用状态更新成功");
					this.loading = false;
					this.getList();
				});
			},
			//新增
			handleAdd() {
				this.$refs.costPop.open('')
				// this.$router.push('/cost/operateRecipe')
			},
			// 编辑
			handleUpdate(row) {
				this.$refs.costPop.open(row.id)
				// this.$router.push('/cost/operateRecipe?id=' + row.id)
			},
			// 详情
			handleDetail(row) {
				this.$router.push('/crop/detail?id=' + row.id)
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			handleVersion(row) {
				this.$router.push('/cost/version?id=' + row.id)
			}
		}
	}
</script>